var emptytilePosRow = 1;
var emptytilePosCol = 2;
// emptytilePosRow 和 emptytilePosCol 这两个变量会保存空白滑块所处的位置。每次移动的时候，都会改变
var cellDisplacement = '69px';
// cellDisplacement 这个变量用来记录这个滑块在动画执行过程中所移动的距离。
$(document).ready(function(){
    $(".cell").click(function(){
    // var cell = document.getElementById("cell");
    // cell.addEventListener('click', function(){
    // Gets the position of the current element
    var pos = $(this).attr('data-pos');
    var posRow = parseInt(pos.split(',')[0]);
    var posCol = parseInt(pos.split(',')[1]);
    // ...

// cell 这个类所在的 div 的 position 是 relative 。所以我们用 top 和 right 这两个属性来实现动画效果。 cellDisplacement 变量会记录下 top 和 right 的最新的值，来实现滑块的移动。然后我们拿到了行和列的值，存在 posRow 和 posCol 这两个变量中。

// Move Up 白色块下移
if (posRow + 1 == emptytilePosRow && posCol == emptytilePosCol) {
    $(this).animate({
        'top': "+=" + cellDisplacement //moves up
    });

    $('#empty').animate({
        'top': "-=" + cellDisplacement //moves down
    });

    emptytilePosRow -= 1;
    $(this).attr('data-pos', (posRow + 1) + "," + posCol);
}

// Move Down 白色块上移
if (posRow - 1 == emptytilePosRow && posCol == emptytilePosCol) {
    $(this).animate({
        'top': "-=" + cellDisplacement //moves down
    });

    $('#empty').animate({
        'top': "+=" + cellDisplacement //moves up
    });

    emptytilePosRow += 1;
    $(this).attr('data-pos', (posRow - 1) + "," + posCol);
}

// Move Left
if (posRow == emptytilePosRow && posCol + 1 == emptytilePosCol) {
    $(this).animate({
        'right': "-=" + cellDisplacement //moves right
    });

    $('#empty').animate({
        'right': "+=" + cellDisplacement //moves left
    });

    emptytilePosCol -= 1;
    $(this).attr('data-pos', posRow + "," + (posCol + 1));
}

// Move Right
if (posRow == emptytilePosRow && posCol - 1 == emptytilePosCol) {
    $(this).animate({
        'right': "+=" + cellDisplacement //moves left
    });

    $('#empty').animate({
        'right': "-=" + cellDisplacement //moves right
    });

    emptytilePosCol += 1;
    $(this).attr('data-pos', posRow + "," + (posCol - 1));
}

// Update empty position
$('#empty').attr('data-pos', emptytilePosRow + "," + emptytilePosCol);

 
    });
});

